<template>
  <div>
    <!-- 钓场列表展示 -->
    <div style="background-color: #fff;padding-bottom: 25px">
      <div class="warp">
        <div class="banner">
          <div class="banner-box">
            <el-carousel motion-blur style="width:100%" height="460px">
              <el-carousel-item v-for="item in imgArray" :key="item.id">
                <img :src="item.image" class="rightImg">
              </el-carousel-item>
            </el-carousel>
            <div class="slide">
              <ul>
                <li v-for="item in category_list" ><a href="">{{ item.name }}</a>
                  <span class="el-icon-arrow-right"></span>
                  <div class="slide-list">
                    <ul>
                      <li v-for="items in item.son"><a href="">
                        <img
                            :src="items.img"
                            alt="">
                        <span>{{ items.name }}</span>
                      </a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 帖子展示 -->
    <div class="noticeWrapper">
      <div class="notice_Item">
        <!-- category就是帖子的分类，方便新页面的标签有正确的active -->
        <bid-card :category="1" title="热门帖子" :source-data="socialData1"></bid-card>
      </div>
      <div class="notice_Item">
        <bid-card :category="3" title="推荐帖子" :source-data="socialData2"></bid-card>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import {  anglingList } from '@/api/front/angling'
import {  socialList } from '@/api/front/social'
import bidCard from '@/components/Platform/HomeCard.vue'
import { initSSE } from '@/utils/sse';
// initSSE(import.meta.env.VITE_APP_BASE_API + '/resource/sse')
const socialData1=ref()
const socialData2=ref()

const anglingListData=ref()
const imgArray=ref([
  {
    id:'1',
    image:'src/assets/images/login-background.jpg'
  },
  {
    id:'2',
    image:'src/assets/images/login-background.jpg'
  },
  {
    id:'3',
    image:'src/assets/images/login-background.jpg'
  }
])
const category_list=ref([
  {
    id:'1',
    name:'钓场1',
    son:{
      img:'src/assets/images/profile.jpg',
      name:"111"
    }
  },
  {
    id:'2',
    name:'钓场2',
    son:{
      img:'src/assets/images/profile.jpg',
      name:"111"
    }
  }
])

const initPage=async ()=>{
  // const res=await anglingList({ pageNum: 1, pageSize: 10 })
  const res1=await socialList({ type: "hot" })
  const res2=await socialList({ type: "recommend" })
  
  // anglingListData.value=res.data.rows
  socialData1.value=res1.data.postsList
  socialData2.value=res2.data.postsList
  console.log("res1",res1);
  console.log("res2",res2);
  
  // console.log(res);

}

onMounted(()=>{
  initPage()
})
</script>

<style lang="scss" scoped>
.noticeWrapper {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  
  .notice_Item {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }
}
.banner {
  width: 100%;
  height: 460px;
}

.warp {
  width: 100%;
  margin: 0 auto;
}

.rightImg {
  width: 100%;
  height: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.banner-box {
  width: 100%;
  height: 460px;
  position: relative;
}

.slide {
  width: 234px;
  height: 460px;
  background: rgba(105, 101, 101, .6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  padding: 20px 0;
  
}

.slide > ul  {
  padding: 0;
}

.slide > ul > li {
  list-style: none;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  padding-left: 30px;
}

.slide a {
  color: #fff;
}

.slide span {
  color: #e0e0e0;
  font-size: 16px;
  padding-right: 20px;
  float: right;
  padding-top: 12px;
}

.slide > ul > li:hover {
  background-color: #4d9cdd;
}

.slide-list {
  width: 992px;
  height: 460px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-left: 0;
  box-sizing: border-box;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
  position: absolute;
  top: 0;
  left: 234px;
  padding-top: 2px;
  display: none;
}
</style>
